{% extends 'base.html' %}

{% block body %}
    <form method='POST'>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/ResizeSensor.js"></script>

            <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/jquery-ui.css">

</head>
<body>
	<h3>各省男女人口数对比（数据分析）</h3>
	<p>根据全国总男女人口数环形图可以得出，2019年-2021年男女比例无太大变化，且男女比例平衡。</p>
	<p>根据各省总人口数折线图，我们可以了解到，2019年-2021年总人口数无太大变化，且广东一直遥遥领先。</p>
	<p>根据2019年-2021年各省男女人口数条形图对比，我们发现，各省男性比例高于女性，其中，广东省情况最为明显。</p>
</body>
<body>
    <style>
        .box {  }
    </style>
        <button onclick="downloadCfg()">Save Config</button>
    <div class="box">
                <div id="407054ec68514a77a168d2567a64501a" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_407054ec68514a77a168d2567a64501a = echarts.init(
            document.getElementById('407054ec68514a77a168d2567a64501a'), 'white', {renderer: 'canvas'});
        var option_407054ec68514a77a168d2567a64501a = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "line",
            "name": "2019\u5e74",
            "connectNulls": false,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "step": false,
            "data": [
                [
                    "\u5317\u4eac",
                    18132
                ],
                [
                    "\u5929\u6d25",
                    13046
                ],
                [
                    "\u6cb3\u5317",
                    62750
                ],
                [
                    "\u5c71\u897f",
                    30910
                ],
                [
                    "\u5185\u8499\u53e4",
                    21136
                ],
                [
                    "\u8fbd\u5b81",
                    36668
                ],
                [
                    "\u5409\u6797",
                    22945
                ],
                [
                    "\u9ed1\u9f99\u6c5f",
                    31874
                ],
                [
                    "\u4e0a\u6d77",
                    20188
                ],
                [
                    "\u6c5f\u82cf",
                    66998
                ],
                [
                    "\u6d59\u6c5f",
                    46831
                ],
                [
                    "\u5b89\u5fbd",
                    52056
                ],
                [
                    "\u798f\u5efa",
                    32474
                ],
                [
                    "\u6c5f\u897f",
                    38576
                ],
                [
                    "\u5c71\u4e1c",
                    83464
                ],
                [
                    "\u6cb3\u5357",
                    80140
                ],
                [
                    "\u6e56\u5317",
                    49384
                ],
                [
                    "\u6e56\u5357",
                    57310
                ],
                [
                    "\u5e7f\u4e1c",
                    92107
                ],
                [
                    "\u5e7f\u897f",
                    40677
                ],
                [
                    "\u6d77\u5357",
                    7698
                ],
                [
                    "\u91cd\u5e86",
                    25560
                ],
                [
                    "\u56db\u5ddd",
                    69457
                ],
                [
                    "\u8d35\u5dde",
                    29915
                ],
                [
                    "\u4e91\u5357",
                    40141
                ],
                [
                    "\u897f\u85cf",
                    2789
                ],
                [
                    "\u9655\u897f",
                    32014
                ],
                [
                    "\u7518\u8083",
                    21960
                ],
                [
                    "\u9752\u6d77",
                    4987
                ],
                [
                    "\u5b81\u590f",
                    5666
                ],
                [
                    "\u65b0\u7586",
                    20165
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            },
            "lineStyle": {
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            }
        },
        {
            "type": "line",
            "name": "2020\u5e74",
            "connectNulls": false,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "step": false,
            "data": [
                [
                    "\u5317\u4eac",
                    17801
                ],
                [
                    "\u5929\u6d25",
                    12778
                ],
                [
                    "\u6cb3\u5317",
                    62086
                ],
                [
                    "\u5c71\u897f",
                    30550
                ],
                [
                    "\u5185\u8499\u53e4",
                    20849
                ],
                [
                    "\u8fbd\u5b81",
                    35969
                ],
                [
                    "\u5409\u6797",
                    22424
                ],
                [
                    "\u9ed1\u9f99\u6c5f",
                    31251
                ],
                [
                    "\u4e0a\u6d77",
                    19826
                ],
                [
                    "\u6c5f\u82cf",
                    66100
                ],
                [
                    "\u6d59\u6c5f",
                    46573
                ],
                [
                    "\u5b89\u5fbd",
                    51658
                ],
                [
                    "\u798f\u5efa",
                    32221
                ],
                [
                    "\u6c5f\u897f",
                    38163
                ],
                [
                    "\u5c71\u4e1c",
                    82502
                ],
                [
                    "\u6cb3\u5357",
                    79005
                ],
                [
                    "\u6e56\u5317",
                    48684
                ],
                [
                    "\u6e56\u5357",
                    56647
                ],
                [
                    "\u5e7f\u4e1c",
                    91922
                ],
                [
                    "\u5e7f\u897f",
                    40385
                ],
                [
                    "\u6d77\u5357",
                    7640
                ],
                [
                    "\u91cd\u5e86",
                    25337
                ],
                [
                    "\u56db\u5ddd",
                    68609
                ],
                [
                    "\u8d35\u5dde",
                    29612
                ],
                [
                    "\u4e91\u5357",
                    39709
                ],
                [
                    "\u897f\u85cf",
                    2797
                ],
                [
                    "\u9655\u897f",
                    31649
                ],
                [
                    "\u7518\u8083",
                    21720
                ],
                [
                    "\u9752\u6d77",
                    4939
                ],
                [
                    "\u5b81\u590f",
                    5627
                ],
                [
                    "\u65b0\u7586",
                    20210
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            },
            "lineStyle": {
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            }
        },
        {
            "type": "line",
            "name": "2021\u5e74",
            "connectNulls": false,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "step": false,
            "data": [
                [
                    "\u5317\u4eac",
                    17673
                ],
                [
                    "\u5929\u6d25",
                    12794
                ],
                [
                    "\u6cb3\u5317",
                    61907
                ],
                [
                    "\u5c71\u897f",
                    30481
                ],
                [
                    "\u5185\u8499\u53e4",
                    20781
                ],
                [
                    "\u8fbd\u5b81",
                    35744
                ],
                [
                    "\u5409\u6797",
                    22173
                ],
                [
                    "\u9ed1\u9f99\u6c5f",
                    30946
                ],
                [
                    "\u4e0a\u6d77",
                    19877
                ],
                [
                    "\u6c5f\u82cf",
                    65996
                ],
                [
                    "\u6d59\u6c5f",
                    47034
                ],
                [
                    "\u5b89\u5fbd",
                    51812
                ],
                [
                    "\u798f\u5efa",
                    32309
                ],
                [
                    "\u6c5f\u897f",
                    38080
                ],
                [
                    "\u5c71\u4e1c",
                    82408
                ],
                [
                    "\u6cb3\u5357",
                    78679
                ],
                [
                    "\u6e56\u5317",
                    48498
                ],
                [
                    "\u6e56\u5357",
                    56516
                ],
                [
                    "\u5e7f\u4e1c",
                    93024
                ],
                [
                    "\u5e7f\u897f",
                    40353
                ],
                [
                    "\u6d77\u5357",
                    7658
                ],
                [
                    "\u91cd\u5e86",
                    25416
                ],
                [
                    "\u56db\u5ddd",
                    68344
                ],
                [
                    "\u8d35\u5dde",
                    29487
                ],
                [
                    "\u4e91\u5357",
                    39584
                ],
                [
                    "\u897f\u85cf",
                    2817
                ],
                [
                    "\u9655\u897f",
                    31684
                ],
                [
                    "\u7518\u8083",
                    21614
                ],
                [
                    "\u9752\u6d77",
                    4945
                ],
                [
                    "\u5b81\u590f",
                    5638
                ],
                [
                    "\u65b0\u7586",
                    20375
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            },
            "lineStyle": {
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            }
        }
    ],
    "legend": [
        {
            "data": [
                "2019\u5e74",
                "2020\u5e74",
                "2021\u5e74"
            ],
            "selected": {
                "2019\u5e74": true,
                "2020\u5e74": true,
                "2021\u5e74": true
            },
            "show": true
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "name": "\u7701\u4efd",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "nameRotate": 60,
            "gridIndex": 0,
            "axisLabel": {
                "rotate": 45
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u5317\u4eac",
                "\u5929\u6d25",
                "\u6cb3\u5317",
                "\u5c71\u897f",
                "\u5185\u8499\u53e4",
                "\u8fbd\u5b81",
                "\u5409\u6797",
                "\u9ed1\u9f99\u6c5f",
                "\u4e0a\u6d77",
                "\u6c5f\u82cf",
                "\u6d59\u6c5f",
                "\u5b89\u5fbd",
                "\u798f\u5efa",
                "\u6c5f\u897f",
                "\u5c71\u4e1c",
                "\u6cb3\u5357",
                "\u6e56\u5317",
                "\u6e56\u5357",
                "\u5e7f\u4e1c",
                "\u5e7f\u897f",
                "\u6d77\u5357",
                "\u91cd\u5e86",
                "\u56db\u5ddd",
                "\u8d35\u5dde",
                "\u4e91\u5357",
                "\u897f\u85cf",
                "\u9655\u897f",
                "\u7518\u8083",
                "\u9752\u6d77",
                "\u5b81\u590f",
                "\u65b0\u7586"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "text": "\u5404\u7701\u603b\u4eba\u53e3\u6570\u5bf9\u6bd4"
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "type": "slider",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "horizontal",
            "zoomLock": false
        },
        {
            "show": true,
            "type": "inside",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "horizontal",
            "zoomLock": false
        }
    ]
};
        chart_407054ec68514a77a168d2567a64501a.setOption(option_407054ec68514a77a168d2567a64501a);
    </script>
<br/>                <div id="a1908d63b6c14f96b085e63051aa32f7" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_a1908d63b6c14f96b085e63051aa32f7 = echarts.init(
            document.getElementById('a1908d63b6c14f96b085e63051aa32f7'), 'white', {renderer: 'canvas'});
        var option_a1908d63b6c14f96b085e63051aa32f7 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#990033",
        "#4C57D8",
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u5973\u6027",
            "data": [
                8808,
                6085,
                30668,
                15002,
                10461,
                18165,
                11280,
                15770,
                9806,
                33260,
                22454,
                25329,
                15934,
                18506,
                40886,
                39306,
                24032,
                28024,
                43238,
                19516,
                3641,
                12568,
                34775,
                14476,
                19855,
                1380,
                15854,
                10826,
                2423,
                2741,
                9861
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        },
        {
            "type": "bar",
            "name": "\u7537\u6027",
            "data": [
                9324,
                6961,
                32082,
                15909,
                10675,
                18503,
                11665,
                16104,
                10382,
                33738,
                24377,
                26727,
                16540,
                20069,
                42579,
                40834,
                25352,
                29286,
                48869,
                21161,
                4058,
                12992,
                34682,
                15438,
                20285,
                1410,
                16160,
                11134,
                2564,
                2925,
                10303
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5973\u6027",
                "\u7537\u6027"
            ],
            "selected": {
                "\u5973\u6027": true,
                "\u7537\u6027": true
            },
            "show": true
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "name": "\u7701\u4efd",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "nameRotate": 60,
            "gridIndex": 0,
            "axisLabel": {
                "rotate": 45
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u5317\u4eac",
                "\u5929\u6d25",
                "\u6cb3\u5317",
                "\u5c71\u897f",
                "\u5185\u8499\u53e4",
                "\u8fbd\u5b81",
                "\u5409\u6797",
                "\u9ed1\u9f99\u6c5f",
                "\u4e0a\u6d77",
                "\u6c5f\u82cf",
                "\u6d59\u6c5f",
                "\u5b89\u5fbd",
                "\u798f\u5efa",
                "\u6c5f\u897f",
                "\u5c71\u4e1c",
                "\u6cb3\u5357",
                "\u6e56\u5317",
                "\u6e56\u5357",
                "\u5e7f\u4e1c",
                "\u5e7f\u897f",
                "\u6d77\u5357",
                "\u91cd\u5e86",
                "\u56db\u5ddd",
                "\u8d35\u5dde",
                "\u4e91\u5357",
                "\u897f\u85cf",
                "\u9655\u897f",
                "\u7518\u8083",
                "\u9752\u6d77",
                "\u5b81\u590f",
                "\u65b0\u7586"
            ]
        }
    ],
    "title": [
        {
            "text": "2019\u5e74\u5404\u7701\u7537\u5973\u4eba\u53e3\u6570\u5bf9\u6bd4"
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "type": "slider",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "vertical",
            "zoomLock": false
        },
        {
            "show": true,
            "type": "inside",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "horizontal",
            "zoomLock": false
        }
    ]
};
        chart_a1908d63b6c14f96b085e63051aa32f7.setOption(option_a1908d63b6c14f96b085e63051aa32f7);
    </script>
<br/>                <div id="bb772190f9a0432d850aa28e61beed04" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_bb772190f9a0432d850aa28e61beed04 = echarts.init(
            document.getElementById('bb772190f9a0432d850aa28e61beed04'), 'white', {renderer: 'canvas'});
        var option_bb772190f9a0432d850aa28e61beed04 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#FFCC99",
        "#996600",
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u5973\u6027",
            "data": [
                8784,
                6053,
                30563,
                14664,
                10384,
                17973,
                11078,
                15332,
                9740,
                32558,
                22023,
                25209,
                15786,
                18323,
                40907,
                38635,
                23594,
                28087,
                43063,
                19305,
                3638,
                12696,
                33976,
                14290,
                19145,
                1393,
                16034,
                10685,
                2399,
                2858,
                9999
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        },
        {
            "type": "bar",
            "name": "\u7537\u6027",
            "data": [
                9017,
                6725,
                31523,
                15887,
                10465,
                17996,
                11346,
                15919,
                10085,
                33542,
                24550,
                26449,
                16435,
                19840,
                41595,
                40370,
                25090,
                28560,
                48859,
                21080,
                4002,
                12641,
                34633,
                15323,
                20564,
                1404,
                15615,
                11035,
                2541,
                2769,
                10211
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5973\u6027",
                "\u7537\u6027"
            ],
            "selected": {
                "\u5973\u6027": true,
                "\u7537\u6027": true
            },
            "show": true
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "name": "\u7701\u4efd",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "nameRotate": 60,
            "gridIndex": 0,
            "axisLabel": {
                "rotate": 45
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u5317\u4eac",
                "\u5929\u6d25",
                "\u6cb3\u5317",
                "\u5c71\u897f",
                "\u5185\u8499\u53e4",
                "\u8fbd\u5b81",
                "\u5409\u6797",
                "\u9ed1\u9f99\u6c5f",
                "\u4e0a\u6d77",
                "\u6c5f\u82cf",
                "\u6d59\u6c5f",
                "\u5b89\u5fbd",
                "\u798f\u5efa",
                "\u6c5f\u897f",
                "\u5c71\u4e1c",
                "\u6cb3\u5357",
                "\u6e56\u5317",
                "\u6e56\u5357",
                "\u5e7f\u4e1c",
                "\u5e7f\u897f",
                "\u6d77\u5357",
                "\u91cd\u5e86",
                "\u56db\u5ddd",
                "\u8d35\u5dde",
                "\u4e91\u5357",
                "\u897f\u85cf",
                "\u9655\u897f",
                "\u7518\u8083",
                "\u9752\u6d77",
                "\u5b81\u590f",
                "\u65b0\u7586"
            ]
        }
    ],
    "title": [
        {
            "text": "2020\u5e74\u5404\u7701\u7537\u5973\u4eba\u53e3\u6570\u5bf9\u6bd4"
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "type": "slider",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "vertical",
            "zoomLock": false
        },
        {
            "show": true,
            "type": "inside",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "horizontal",
            "zoomLock": false
        }
    ]
};
        chart_bb772190f9a0432d850aa28e61beed04.setOption(option_bb772190f9a0432d850aa28e61beed04);
    </script>
<br/>                <div id="b4a26c56a2984f2b89ab5551755a26b5" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_b4a26c56a2984f2b89ab5551755a26b5 = echarts.init(
            document.getElementById('b4a26c56a2984f2b89ab5551755a26b5'), 'white', {renderer: 'canvas'});
        var option_b4a26c56a2984f2b89ab5551755a26b5 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#99CC99",
        "#336699",
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u5973\u6027",
            "data": [
                8892,
                5931,
                30697,
                14888,
                10174,
                17839,
                10975,
                15249,
                9621,
                32441,
                22616,
                25145,
                15503,
                18500,
                41045,
                38864,
                23525,
                28047,
                42815,
                19357,
                3741,
                12686,
                34400,
                14084,
                19061,
                1416,
                15804,
                10613,
                2373,
                2844,
                10200
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        },
        {
            "type": "bar",
            "name": "\u7537\u6027",
            "data": [
                8781,
                6863,
                31210,
                15593,
                10608,
                17905,
                11198,
                15697,
                10256,
                33555,
                24418,
                26667,
                16806,
                19579,
                41363,
                39815,
                24973,
                28469,
                50209,
                20996,
                3917,
                12730,
                33944,
                15403,
                20523,
                1401,
                15879,
                11001,
                2571,
                2794,
                10175
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5973\u6027",
                "\u7537\u6027"
            ],
            "selected": {
                "\u5973\u6027": true,
                "\u7537\u6027": true
            },
            "show": true
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "name": "\u7701\u4efd",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "nameRotate": 60,
            "gridIndex": 0,
            "axisLabel": {
                "rotate": 45
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u5317\u4eac",
                "\u5929\u6d25",
                "\u6cb3\u5317",
                "\u5c71\u897f",
                "\u5185\u8499\u53e4",
                "\u8fbd\u5b81",
                "\u5409\u6797",
                "\u9ed1\u9f99\u6c5f",
                "\u4e0a\u6d77",
                "\u6c5f\u82cf",
                "\u6d59\u6c5f",
                "\u5b89\u5fbd",
                "\u798f\u5efa",
                "\u6c5f\u897f",
                "\u5c71\u4e1c",
                "\u6cb3\u5357",
                "\u6e56\u5317",
                "\u6e56\u5357",
                "\u5e7f\u4e1c",
                "\u5e7f\u897f",
                "\u6d77\u5357",
                "\u91cd\u5e86",
                "\u56db\u5ddd",
                "\u8d35\u5dde",
                "\u4e91\u5357",
                "\u897f\u85cf",
                "\u9655\u897f",
                "\u7518\u8083",
                "\u9752\u6d77",
                "\u5b81\u590f",
                "\u65b0\u7586"
            ]
        }
    ],
    "title": [
        {
            "text": "2021\u5e74\u5404\u7701\u7537\u5973\u4eba\u53e3\u6570\u5bf9\u6bd4"
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "type": "slider",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "vertical",
            "zoomLock": false
        },
        {
            "show": true,
            "type": "inside",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "horizontal",
            "zoomLock": false
        }
    ]
};
        chart_b4a26c56a2984f2b89ab5551755a26b5.setOption(option_b4a26c56a2984f2b89ab5551755a26b5);
    </script>
<br/>    </div>
    <script>
            $('#407054ec68514a77a168d2567a64501a').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#407054ec68514a77a168d2567a64501a>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#407054ec68514a77a168d2567a64501a'), function() { chart_407054ec68514a77a168d2567a64501a.resize()});
            $('#a1908d63b6c14f96b085e63051aa32f7').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#a1908d63b6c14f96b085e63051aa32f7>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#a1908d63b6c14f96b085e63051aa32f7'), function() { chart_a1908d63b6c14f96b085e63051aa32f7.resize()});
            $('#bb772190f9a0432d850aa28e61beed04').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#bb772190f9a0432d850aa28e61beed04>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#bb772190f9a0432d850aa28e61beed04'), function() { chart_bb772190f9a0432d850aa28e61beed04.resize()});
            $('#b4a26c56a2984f2b89ab5551755a26b5').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#b4a26c56a2984f2b89ab5551755a26b5>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#b4a26c56a2984f2b89ab5551755a26b5'), function() { chart_b4a26c56a2984f2b89ab5551755a26b5.resize()});
            var charts_id = ['407054ec68514a77a168d2567a64501a','a1908d63b6c14f96b085e63051aa32f7','bb772190f9a0432d850aa28e61beed04','b4a26c56a2984f2b89ab5551755a26b5'];
function downloadCfg () {
    const fileName = 'chart_config.json'
    let downLink = document.createElement('a')
    downLink.download = fileName

    let result = []
    for(let i=0; i<charts_id.length; i++) {
        chart = $('#'+charts_id[i])
        result.push({
            cid: charts_id[i],
            width: chart.css("width"),
            height: chart.css("height"),
            top: chart.offset().top + "px",
            left: chart.offset().left + "px"
        })
    }

    let blob = new Blob([JSON.stringify(result)])
    downLink.href = URL.createObjectURL(blob)
    document.body.appendChild(downLink)
    downLink.click()
    document.body.removeChild(downLink)
}
    </script>
    <h2 align="center">{{ the_title }}</h2>
    <h3 align="center">请选择您想了解的年份</h3>
    <div align="center">
    <select  name="" onchange="javascript:window.open(this.options[this.selectedindex].value)" style="width:250px;height:30px;text-align:center;text-align-last:center">
<option value='/provice_people/2019' selected>2019</OPTION>
<option value='/provice_people/2020' selected>2020</option>
<option value='/provice_people/2021' selected>2021</option>
<option value="#" selected>--请选择--</option>
    </select>
    </div>
    <SCRIPT language=JavaScript>
var select = document.querySelector('select');select.onchange = function(){	window.location=this.value;}
    </SCRIPT>
<table align="center">
    <tr>
    {% for row_title in the_row_title  %}
        <th>{{ row_title }}</th>
    {% endfor %}
     </tr>
    {% for log_row in the_data %}
        <tr>
        {% for item in log_row %}
            <td>{{ item }}</td>
            {% endfor %}
        </tr>

    {% endfor %}

</table>
<div align="right">
    <a href="/"><input class="anniu" name="" type="button" value="返回首页" /></a>
</div>
</body>
</form>
{% endblock %}
